<template>
	<view>
		<view class="searchTitle">约单对象</view>
		<view class="popupFlex">


			<view v-for="(item,index) in MasterLabels" :key="index" class="searchLabel"
				:class="currSearchLabel == item.LabelID && 'sed'" @click="selectLabel(item, index)">
				{{item.LabelName}}
				<!-- <view v-if="currSearchLabel == item.LabelID" class="searchLabel sed">
					<text>{{ item.LabelName }}</text>
					(<text v-for="(itm,idx) in item.sub">{{ itm.LabelName}}</text>)
				</view>
				<view v-else class="searchLabel">
					<text>{{ item.LabelName }}</text>
					(<text v-for="(itm,idx) in item.sub">{{ itm.LabelName}}</text>)
				</view> -->
			</view>
		</view>
		<view class="searchTitle">发起人性别</view>
		<view class="popupFlex">
			<view v-for="(item,index) in searchSex" :key="index" class="searchLabel"
				:class="currSearchSex == item.sex && 'sed'" @click="onSearchSex(item, index)">
				<!-- 	<view v-if="currSearchSex == item.sex" class="searchLabel sed">{{ item.sexName }}</view>
				<view v-else class="searchLabel">{{ item.sexName }}</view> -->
				{{ item.sexName }}
			</view>
		</view>
		<view class="searchTitle">收费模式</view>
		<view class="popupFlex">
			<view v-for="(item,index) in chargeModes" :key="index" class="searchLabel"
				:class="currChargeMode == item.LabelID && 'sed'" @click="selectCharge(item, index)">
				<!-- <view v-if="currChargeMode == item.LabelID" class="searchLabel sed">{{ item.LabelName }}</view>
				<view v-else class="searchLabel">{{ item.LabelName }}</view> -->
				{{ item.LabelName }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			Labels: {
				type: [Object, Array],
				default: {}
			},
			searchSex: {
				type: [Object, Array],
				default: []
			},
			chargeModes: {
				type: [Object, Array],
				default: []
			},
			isClean: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				currSearchLabel: 0,
				addLabel: false,
				selectCount: 0,
				currSearchSex: -1,
				currChargeMode: -1,
				MasterLabels: [],
			}
		},
		watch: {
			// Labels: {
			// 	handler(val) {
			// 		// console.log('执行了~')
			// 		this.MasterLabels = this.MasterLabels.concat(val.sub)
			// 	}
			// }
			isClean: {
				handler(val) {
					// console.log('执行了~')
					this.currSearchLabel = 0;
					this.currSearchSex = -1;
					this.currChargeMode = -1;
					this.$emit('selectLabel', this.currSearchLabel);
					this.$emit('onSearchSex', this.currSearchSex, 0);
					this.$emit('selectCharge', this.currChargeMode);
				}
			}
		},
		mounted() {
			this.Labels.MasterLabels.forEach(item => {
				this.MasterLabels = this.MasterLabels.concat(item.sub)
			})

			this.MasterLabels[0] = {
				LabelName: '全部',
				LabelID: 0
			}
		},
		methods: {
			// 选择约单对象
			selectLabel(item, index) {
				// console.log(item)
				this.currSearchLabel = item.LabelID
				this.$emit('selectLabel', this.currSearchLabel);
			},
			// 选择性别
			onSearchSex(item, index) {
				// console.log(item)
				this.currSearchSex = item.sex;
				// if (index == 0) this.currSearchSex = -1;
				this.$emit('onSearchSex', this.currSearchSex, 0);
			},
			// 选择收费模式
			selectCharge(item, index) {
				// console.log(item)
				this.currChargeMode = item.LabelID;
				if (index == 0) this.currChargeMode = -1;
				this.$emit('selectCharge', this.currChargeMode);
			},
		}
	}
</script>

<style lang="scss">
	.searchTitle {
		clear: both;
		font-size: 30rpx;
		font-weight: bold;
		margin-right: 20rpx;
		padding: 20rpx 0;
	}

	.searchTitle:first-child {
		padding-top: 0;
	}

	.searchLabel {
		width: calc((100% - 30rpx) /4);
		background-color: #f0f0f0;
		color: #666;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 10rpx;
		margin-top: 10rpx;
		margin-right: 10rpx;
		text-align: center;

		&:nth-child(4n) {
			margin-right: 0;
		}
	}

	/* .searchTitle {
		clear:both;
		font-size: 30rpx;
		font-weight: bold
	} */
	.popupFlex {
		display: flex;
		flex-wrap: wrap
	}

	/* .searchLabel {
		width:auto;
		float:left;
		padding:10rpx;
		background-color: #f0f0f0;
		color:#666;
		border-radius: 10rpx;
		margin:20rpx;
	} */
	.searchLabel.sed {
		background-color: #FFDD00;
	}
</style>